<template>
  <nav>星星投票</nav>
  <main>
    <RouterView />
  </main>

  <!-- 导航栏 -->
  <van-tabbar v-model="active" route>
  <van-tabbar-item to="/" icon="home-o">投票</van-tabbar-item>
  <van-tabbar-item to="/send" icon="send-gift-o">分发选票</van-tabbar-item>
  <van-tabbar-item to="/info" icon="friends-o">我的</van-tabbar-item>
</van-tabbar>

</template>

<script>
import { onMounted, ref } from "vue";
import useWeb3 from './util';

const { ballotSm } = useWeb3();
const host = ref("");
const topic = ref("");

// 导航栏的选中状态
const active = ref(0);

const getHost = async () => {
  host.value = await ballotSm.methods.chairperson().call();
}

const getTopic = async () => {
  topic.value = await ballotSm.methods.topic().call();
}



export default {
  name: 'App',
  components: {

  },
  setup() {
    onMounted(async () => {
      console.log(`the component is now mounted.`);
      await getHost();
      await getTopic();
    })
    return {
      host,
      topic,
      
      active
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 32px;
}
nav {
  text-align: center;
  color: #1989fa;
}
</style>
